<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <!-- 输入框 -->
      <input class="new-todo" placeholder="What needs to be done?" autofocus />
    </header>

    <section class="main">
      <!-- 全选按钮 -->
      <input id="toggle-all" class="toggle-all" type="checkbox" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- 给 li 加 completed 就可以有选中的样式 -->
        <li class="completed">
          <div class="view">
            <!-- 给 input 加 checked 就可以选中 -->
            <input class="toggle" type="checkbox" checked />
            <label>Taste JavaScript</label>
            <!-- 删除按钮 -->
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
        <li>
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label>Buy a unicorn</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Rule the web" />
        </li>
      </ul>
    </section>

    <footer class="footer">
      <!-- 剩余数量 -->
      <span class="todo-count"><strong>0</strong> item left</span>
      <ul class="filters">
        <li>
          <a class="selected" href="#/">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <!-- 清空已完成 -->
      <button class="clear-completed">Clear completed</button>
    </footer>
  </section>
</template>